<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="keywords" content="">
        <meta name="author" content="">
        <title>Order</title>
        <?php fnGetMeta(); ?>
        <link rel="stylesheet" type="text/css" href="<?php echo TEMPLATE; ?>css/payment.css" />
        <style>
            .socialNetwork li a{ padding-top: 10px;}    
        </style>
    </head>
    <body class="activateAppearAnimation header3" style="padding-top:0px;">
        <!-- Primary Page Layout 
                ================================================== --> 
        <!-- globalWrapper -->
        <div id="globalWrapper" class="localscroll">
            <?php fnGetHeader(); ?>
            <section class="inner_banner">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6">
                            <ul id="navTrail">
                                <li><a href="<?php echo URL; ?>">Home</a></li>
                                <li id="navTrailLast">Order Now</li>
                            </ul>
                        </div>
                        <div class="col-sm-6 hidden-xs"></div>
                    </div>
                </div>
            </section>    
            <section class="titles">
                <div class="container">
                    <h2> <span>24/7 instant access</span> to thousands of tech experts and amongst the highest resolution rates in the industry </h2>
                </div>
            </section>
            <div class="container_full">
                <div class="container">
                    <form action="<?php echo $this->url; ?>" method="post">
                        <!--Order Now form-->
                        <input type="hidden" name="steps" value='<?php echo $this->step; ?>'>
                        <input type="hidden" name="plan" id="planHidden" value='<?php echo $this->plan; ?>'>
                        <input type="hidden" name="price" id="priceHidden" value='<?php echo $this->price; ?>'>
                        <section class="middle_section inside_innermiddle_page clearfix">
                            <section class="">
                                <section class="inner_call_for_support payment_page">

                                    <div class="payment">
                                        <table width="100%" border="1">
                                            <tr class="titles">
                                                <td bgcolor="#0C0C0C" width="30%">Product Type</td>
                                                <td bgcolor="#0C0C0C">Price</td>
                                                <td bgcolor="#0C0C0C">Total</td>
                                            </tr>
                                            <tr id="trDHPremium" class="titles_bot">
                                                <td><select name="plan" id="plan" onchange="planchanger()" style="width:50%">
                                                        <option value="">-Select Plan-</option>
                                                        <option value="Silver Plan" <?php
                                                        if (urldecode($this->plan) == "Silver Plan") {
                                                            echo 'selected';
                                                        }
                                                        ?> >Silver Plan</option>
                                                        <option value="Gold Plan" <?php
                                                        if (urldecode($this->plan) == "Gold Plan") {
                                                            echo 'selected';
                                                        }
                                                        ?>>Gold Plan</option>
                                                        <option value="Platinum Plan" <?php
                                                        if (urldecode($this->plan) == "Platinum Plan") {
                                                            echo 'selected';
                                                        }
                                                        ?>>Platinum Plan</option>
                                                       <!--- <option value="Custom Plan" <?php
                                                        if (urldecode($this->plan) == "Custom Plan") {
                                                            echo 'selected';
                                                        }
                                                        ?>>Custom Plan</option>   --->
                                                    </select>
                                                    <input type="text" name="customprice" id="customprice" class="odr-text" style="width:30%; margin-left: 20px; display: none;" onkeyup="changecustom()">
                                                </td>
                                                <td>Plan charges<span class="">(<span id="planCharge"><?php echo $this->price; ?></span>)</span></td>
                                                <td><span class="orange "><span id="planCharge1"><?php echo $this->price; ?></span></span></td>
                                            </tr>



                                        </table>
                                    </div>

                                    <div class="payment_info">
                                        <div class="left_section">
                                            <div class="ststus_bar">
                                                <ul>
                                                    <li id="liPersonal" class="first  active "> <a href="<?php echo URL; ?>order/?price=<?php echo GET('price'); ?>&plan=<?php echo GET('plan'); ?>&step=1" rel="personal_information">1</a> <span>Personal Information</span> </li>
                                                    <li id="liPayment"  class="<?php if (GET('step') == 2 or GET('step') == 3) { ?>first  active <?php } ?>"> <a href="<?php
                                                        if (GET('step') == 2 or GET('step') == 3) {
                                                            echo URL;
                                                            ?>order/?price=<?php echo GET('price'); ?>&plan=<?php echo GET('plan'); ?>&step=2<?php } ?>" rel="payment">2</a> <span>Payment</span> </li>
                                                    <li id="liThankyou" class="<?php if (GET('step') == 3) { ?>first  active <?php } ?> last" > <a href="<?php
                                                                                                                                                   if (GET('step') == 3) {
                                                                                                                                                       echo URL;
                                                                                                                                                       ?>order/?price=<?php echo GET('price'); ?>&plan=<?php echo GET('plan'); ?>&step=3<?php } ?>" rel="thankyou">3</a> <span>Thank you</span> </li>
                                                </ul>
                                            </div>

                                            <!--Personal Information will be hide after enable to Payment section -->
<?php if (GET('step') == 1) { ?>
                                                <fieldset >
                                                    <div id="information1" class="c_info">
                                                        <div class="security_code">
                                                            <label>Salutation <span class="star">*</span></label>
                                                            <select name="salutation" id="drpSalutation" class="exp_section1" required>
                                                                <option selected="selected" value="">---Select---</option>
                                                                <option value="Mr">Mr.</option>
                                                                <option value="Sir">Sir</option>
                                                                <option value="Mrs">Mrs.</option>
                                                                <option value="Miss">Miss</option>
                                                                <option value="Ms">Ms.</option>
                                                                <option value="Dr">Dr.</option>

                                                            </select>
                                                        </div>
                                                        <label>First Name<span class="star">*</span></label>
                                                        <input name="fname" type="text" maxlength="50" id="txtFirstname" size="19" required class="odr-text"/>
                                                        <label>Last Name<span class="star">*</span></label>
                                                        <input name="lname" type="text" maxlength="50" id="txtLastname" size="19" required class="odr-text"/>
                                                        <label>Email Address<span class="star">*</span></label>
                                                        <input name="email" type="email" maxlength="100" id="txtEmail" required class="odr-text"/>
                                                        <label>Zip Code<span class="star">*</span> </label>
                                                        <input name="zipcode" type="text" maxlength="10" id="txtZipcode" required class="odr-text"/>
                                                        <label>Address<span class="star">*</span></label>
                                                        <input name="address" type="text" maxlength="150" id="txtAddress" required class="odr-text"/>
                                                        <div class="security_code">
                                                            <label>Phone No<span class="star">*</span></label>
                                                            <input name="phone" type="text" maxlength="" id="txtPhone1" class="phone_no odr-text" />
                                                        </div>
                                                        <div class="btn_container">
                                                            <label class="s_code">&nbsp;</label>

                                                            <input type="submit" class="btn btn-lg" name="continue" value="Continue"  id="btnContinue" /> 

                                                        </div>
                                                    </div>

                                                </fieldset>

                                                <!--                                End 1-->
                                                <!--                                Start 2-->


<?php } elseif (GET('step') == 2) { ?>
                                                <fieldset>
                                                    <div id="information2" class="c_info">
                                                        <div class="security_code">
                                                            <label>Credit Card Type <span class="star">*</span></label>
                                                            <select name="drpCardType" id="drpCardType" class="exp_section1" required>
                                                                <option selected="selected" value="">---Select---</option>
                                                                <option value="Visa">Visa</option>
                                                                <option value="MasterCard">Master Card</option>
                                                                <option value="Discover">Discover</option>
                                                                <option value="Amex">American Express</option>

                                                            </select>
                                                        </div>
                                                        <label>Credit Card No.<span class="star">*</span></label>
                                                        <input name="txtCreditcardno" maxlength="16" id="txtCreditcardno" value="" requiredtype="number" class="odr-text">
                                                        <div class="security_code">
                                                            <label>Expiration Date <span class="star">*</span></label>
                                                            <select name="drpExpMonth" id="drpExpMonth" class="exp_section" required>
                                                                <option selected="selected" value="">--</option>
                                                                <option value="01">01</option>
                                                                <option value="02">02</option>
                                                                <option value="03">03</option>
                                                                <option value="04">04</option>
                                                                <option value="05">05</option>
                                                                <option value="06">06</option>
                                                                <option value="07">07</option>
                                                                <option value="08">08</option>
                                                                <option value="09">09</option>
                                                                <option value="10">10</option>
                                                                <option value="11">11</option>
                                                                <option value="12">12</option>

                                                            </select>
                                                            <select name="expyear" id="drpExpYear" class="exp_section" required>
                                                                <option selected="selected" value="">----</option>
                                                                <option value="2014">2014</option>
                                                                <option value="2015">2015</option>
                                                                <option value="2016">2016</option>
                                                                <option value="2017">2017</option>
                                                                <option value="2018">2018</option>
                                                                <option value="2019">2019</option>
                                                                <option value="2020">2020</option>
                                                                <option value="2021">2021</option>
                                                                <option value="2022">2022</option>
                                                                <option value="2023">2023</option>
                                                                <option value="2024">2024</option>
                                                                <option value="2025">2025</option>

                                                            </select>
                                                        </div>
                                                        <label>Name on Card <span class="star">*</span></label>
                                                        <input name="nameoncard" id="txtNameoncard" value="" type="text" required>
                                                        <div class="security_code">
                                                            <label>CVV <span class="star">*</span></label>
                                                            <div class="s_wrap">
                                                                <input name="cvv" maxlength="4" id="txtCvv" class="cvv_code" type="password" required>
                                                                <span class="wh_wrap">&nbsp;</span> </div>
                                                        </div>
                                                        <div class="security_code">
                                                            <label class="s_code no_data">&nbsp;</label>
                                                            <span style="float:left;"><input id="chkTerms" name="terms" type="checkbox"></span>
                                                            <span class="iagree_info"> I agree with the <a href="<?php echo URL; ?>terms-and-conditions" target="_blank"> terms and conditions</a></span></div>

                                                        <div class="btn_container">
                                                            <label class="s_code">&nbsp;</label>



                                                            <input type="hidden" name="salutation" value="<?php echo $this->hiddenData['salutation']; ?>">
                                                            <input type="hidden" name="fname" value="<?php echo $this->hiddenData['fname']; ?>">
                                                            <input type="hidden" name="lname" value="<?php echo $this->hiddenData['lname']; ?>">
                                                            <input type="hidden" name="email" value="<?php echo $this->hiddenData['email']; ?>">
                                                            <input type="hidden" name="zipcode" value="<?php echo $this->hiddenData['zipcode']; ?>">
                                                            <input type="hidden" name="address" value="<?php echo $this->hiddenData['address']; ?>">
                                                            <input type="hidden" name="phone" value="<?php echo $this->hiddenData['phone']; ?>">


                                                            <input name="btnSubmit" class="btn btn-lg" value="Submit"  id="btnSubmit" type="submit">

                                                        </div>
                                                        <div class="btn_container">
                                                            <label class="s_code">&nbsp;</label>
                                                            <span id="lblMessage" style="font-size:14px; padding-top:10px;"></span>
                                                        </div>
                                                    </div>
                                                </fieldset>  
<?php } elseif (GET('step') == 3) { ?>
                                                <!--            End Step 2                -->


                                                <!--                            STEP 3-->
                                                <fieldset>
                                                    <div id="information1" class="c_info">
                                                        <center>We have received your Payment. Thank You.</center>
                                                    </div>
                                                </fieldset>  
<?php } ?>
                                            <!--END STEP 3                            -->


                                        </div> 


                                        <div class="right_section">
                                            <div class="b_issue">
                                                <h5>FOR BILLING ISSUES<br>
                                                    OR CUSTOMER COMPLAINTS<br>
                                                    <span>Call</span> <strong><?php echo TEL; ?></strong></h5>
                                            </div>
                                            <div id="divDHPremium" class="price">
                                                <div class="dhs">
                                                    <h3><b>TechOak Inc</b></h3>             
                                                </div>
                                                <h5>INSTANT TECH SUPPORT</h5>
                                                <ul>
                                                    <li>Remote tech support </li>
                                                    <li>Unlimited access to tech experts, for a whole year </li>
                                                    <li>Subscription includes PC Optimization &amp; installation of PC, printer and connected devices </li>
                                                </ul>
                                            </div>


                                            <div class="clearer"></div>
                                        </div>

                                        <div class="clearer"></div>
                                    </div>
                                </section>
                            </section>
                        </section>

                    </form>
                    <!--  End Order NoW FoRm-->
                </div>
            </div>
        </div>
        <div id="contentBk" class="clearfix">
            <div id="content">
                <div class="wrapper">
                    <div class="box">
                        <div class="boxInfo">
                        </div>
                    </div>
                </div>
            </div>
            <script>
                function planchanger() {
                    var plan = document.getElementById("plan").value;
                    if (plan == 'Silver Plan') {
                        totalAmount = "$29.99";
                        jQuery("#planCharge").text(totalAmount);
                        jQuery("#planCharge1").text(totalAmount);
                        jQuery('#planHidden').val(plan);
                        jQuery('#priceHidden').val(totalAmount);
                    }
                    else if (plan == "Gold Plan") {
                        totalAmount = "$159.99";
                        jQuery("#planCharge").text(totalAmount);
                        jQuery("#planCharge1").text(totalAmount);
                        jQuery('#planHidden').val(plan);
                        jQuery('#priceHidden').val(totalAmount);
                    }
                    else if (plan == "Platinum Plan") {
                        totalAmount = "$179.99";
                        jQuery("#planCharge").text(totalAmount);
                        jQuery("#planCharge1").text(totalAmount);
                        jQuery('#planHidden').val(plan);
                        jQuery('#priceHidden').val(totalAmount);
                    }
                    else if (plan == "Custom Plan") {
                        totalAmount = "$0.00";
                        $( "#customprice" ).show();
                        jQuery("#planCharge").text(totalAmount);
                        jQuery("#planCharge1").text(totalAmount);
                         jQuery('#planHidden').val(plan);
                        jQuery('#priceHidden').val(totalAmount);
                    }
                    else
                    {
                        totalAmount = "$0.00";
                        jQuery("#planCharge").text(totalAmount);
                        jQuery("#planCharge1").text(totalAmount);
                         jQuery('#planHidden').val(plan);
                        jQuery('#priceHidden').val(totalAmount);
                    }
                }
                function changecustom()
                {
                     var price = document.getElementById("customprice").value;
                     jQuery("#planCharge").text('$'+price);
                     jQuery("#planCharge1").text('$'+price);
                     jQuery('#planHidden').val("Custom Plan");
                     jQuery('#priceHidden').val('$'+price);
                }
            </script>
<?php fnGetFooter(); ?>
    </body>
</html>